<template>
    <div id="app">
        <head-top v-if="hShow" :head-title="hTit" :go-back="!hBack" set-more="!hOper">
            <template slot="before"><slot name="before"></slot>
</template>
<template slot="after">
    <slot name="after">
    </slot>
</template>
        </head-top>
        <div v-iscroll="iscrollConf" :id="scrollId">
            <div id="scroller">
                <slot></slot>
            </div>
        </div>
    </div>
</template>
<script>
    import Vue from 'vue';
    import VIscroll from '../assets/js/VIScroll.js';
    import headTop from '@/components/header';
    Vue.use(VIscroll);
    const iScrollHandle = function(El, options) {
        var ms = this;
        var Ev = {
            backToTop: function() {}
        };
        //初始化滚动事件
        ms.scrObj = new IScroll(El, options);
        ms.scrObj.on("scrollStart", function() {
            try {
                ms.ev.scrollStart.call(this);
            } catch (error) {}
        });
        ms.scrObj.on("scroll", function() {
            var _this = this;
            try {
                if (_this.y > 80) {
                    console.log(_this.y)
                } else if (_this.y < (_this.maxScrollY - 12)) {
                    ms.ev.loadMore.call(this);
                }
                ms.ev.scroll.call(this);
            } catch (error) {}
        });
        ms.scrObj.on("scrollEnd", function() {
            try {
                ms.ev.scrollEnd.call(this);
            } catch (error) {}
        });
        ms.refresh = () => ms.scrObj.refresh();
        ms.destroy = () => ms.scrObj.destroy();
        ms.ev = Ev;
        return ms;
    }
    export default {
        data: function() {
            return {
                scrollId: "wrapper",
                iscrollConf: {
                    probeType: 3,
                    tap: true,
                    click: false,
                    mouseWheel: false,
                    disableMouse: true,
                    //disablePointer: true,
                    scrollbars: false,
                    fadeScrollbars: false,
                    interactiveScrollbars: false,
                    keyBindings: false,
                    deceleration: 0.0002,
                    preventDefaultException: {
                        tagName: /^(A|INPUT|TEXTAREA|BUTTON|SELECT)$/
                    }
                },
                headConfig: {}
            }
        },
        mounted: function() {
            this.scroller();
        },
        components: {
            headTop
        },
        props: ["hShow", "hTit", "hBack", "hOper"],
        methods: {
            scroller: function() {
                var _self = this;
                //获取页面滚动对象
                var myScroll = window.scroll[this.scrollId];
                myScroll.on("scrollStart", function() {
                    _self.$emit('refresh')
                });
                ms.scrObj.on("scroll", function() {
                    var _this = this;
                    try {
                        if (_this.y > 80) {
                            console.log(_this.y)
                        } else if (_this.y < (_this.maxScrollY - 12)) {
                            _self.$emit('   ')
                        }
                        ms.ev.scroll.call(this);
                    } catch (error) {}
                });
            },
            refresh: function() {
                console.log("OK");
                this.$bus.on("loadMore", function() {
                    console.log("OK5555555555555555555");
                })
            }
        }
    }
</script>
<style>
    #wrapper {
        position: absolute;
        z-index: 2;
        top: 50px;
        bottom: 0px;
        left: 0;
        width: 100%;
        background: #EFEFF4;
        overflow: hidden;
    }
    #scroller {
        position: absolute;
        z-index: 1;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        width: 100%;
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-text-size-adjust: none;
        -moz-text-size-adjust: none;
        -ms-text-size-adjust: none;
        -o-text-size-adjust: none;
        text-size-adjust: none;
    }
</style>